import React from 'react';
import PageScaffold from './PageScaffold';

export default function PlotSettingsTrajectory() {
  const chips = [
    { label: '绘图设置', primary: true, closable: true },
    { label: '突触机制', closable: true },
    { label: '连接规则', closable: true },
    { label: '亚细胞连接规则', closable: true },
    { label: '反应扩散', closable: true },
    { label: '刺激目标', closable: true },
    { label: '绘图设置', closable: true },
    { label: '细胞群体', closable: true },
    { label: '刺激源', closable: true },
    { label: '刺激源', closable: true },
  ]
  return (
    <PageScaffold
      chips={chips}
      left={(
        <div>
          <div style={{ marginBottom: 20 }}>
            <h3 style={{ margin: 0, marginBottom: 12 }}>绘图设置</h3>
            <button className="btn-circle" style={{ width: 48, height: 48, fontSize: 24 }}>＋</button>
          </div>
          <div className="tile-grid">
            <div className="tile active">绘制 轨迹图</div>
            <div className="tile">绘制 光栅图</div>
            <div className="tile">绘制 局部场电位图</div>
            <div className="tile">绘制 反应-扩散 浓度图</div>
          </div>
        </div>
      )}
      right={(
        <div className="list">
          <div className="field"><label>要包含的细胞</label><div className="input">1个细胞</div></div>
          <div className="field"><label>开始时间</label><div className="input">2025/10/02 11:12</div></div>
          <div className="field"><label>结束时间</label><div className="input">2025/10/02 11:12</div></div>
          <div className="field"><label>轨迹绘制图/细胞</label><div className="input" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><span></span><span>▾</span></div></div>
          <div className="switch-item"><span className="switch on" /> 叠加数据</div>
          <div className="switch-item"><span className="switch on" /> 重新运行模拟</div>
        </div>
      )}
    />
  )
}

